<template>
  <div
    ref="ttText"
    :class="textClass"
    :style="textStyle"
  >
    <slot v-if="$slots.default.length==1&&!$slots.default[0].tag"></slot>
  </div>
</template>

<script>
export default {
  name:"mm-text",
  props: {
    lines: {// 大于0则固定行数
      type: Number,
      default: 0
    },

    type: {// ellipsis、hidden、scroll、scrollbar、marquee
      type: String,
      default: "ellipsis"
    },

    marqueeTime: {// 单行情况才有效，滚动时间，单位秒，为0则不自动滚动
      type: Number,
      default: 0
    },

    marqueeCount: {// 单行情况才有效，滚动次数，为0则无限滚动
      type: Number,
      default: 0
    }
  },

  computed: {
    textClass() {
      if (this.lines <= 0) {
        return null;
      }
      if (this.type == "scroll") {
        return "text-scroll-none";
      }
      if (this.type == "scrollbar") {
        return "text-scroll-bar"
      }
      if (this.type == "marquee") {
        if (this.lines == 1) {
          if (this.marqueeTime > 0) {
            return "text-marquee";
          }
        }
      }
      return null;
    },

    textStyle() {
      if (this.lines <= 0) {
        return null;
      }
      let style = "line-height:1.5;";
      if (this.type == "ellipsis") {
        style += "overflow:hidden;text-overflow:ellipsis;";
        if (this.lines == 1) {
          style += "white-space:nowrap;";
        } else {
          if (this.isIE()) {
            let maxHeight = this.getMaxHeight();
            if (maxHeight && !isNaN(maxHeight)) {
              style += "max-height:" + maxHeight + "px;";
            }
          } else {
            style += "display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:" + this.lines;
          }
        }
      } else if (this.type == "hidden") {
        style += "overflow:hidden;";
        if (this.lines == 1) {
          style += "white-space:nowrap;";
        } else {
          let maxHeight = this.getMaxHeight();
          if (maxHeight && !isNaN(maxHeight)) {
            style += "max-height:" + maxHeight + "px;";
          }
        }
      } else if (this.type == "scroll" || this.type == "scrollbar") {
        style += "overflow:auto;";
        if (this.lines == 1) {
          style += "white-space:nowrap;";
        } else {
          let maxHeight = this.getMaxHeight();
          if (maxHeight && !isNaN(maxHeight)) {
            style += "max-height:" + maxHeight + "px;";
          }
        }
      } else if (this.type == "marquee") {
        if (this.lines == 1) {
          style += "white-space:nowrap;"
          if (this.marqueeTime > 0) {
            style += "animation-duration:" + this.marqueeTime + "s;animation-iteration-count:"
              + (this.marqueeCount > 0 ? this.marqueeCount : "infinite");
          } else {
            style += "overflow:hidden;text-overflow:ellipsis;";
          }
        }
      }
      return style;
    }
  },

  methods: {
    getMaxHeight() {
      if (this.$refs.ttText) {
        let cssStyle = window.getComputedStyle(this.$refs.ttText);
        if (cssStyle && cssStyle["line-height"]) {
          return cssStyle["line-height"].replace("px", "") * this.lines;
        }
      }
      return 0;
    },

    isIE() {
      if (navigator) {
        if (navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1) {// IE<11
          return true;
        }
        if (navigator.userAgent.indexOf('Trident') > -1 && navigator.userAgent.indexOf("rv:11.0") > -1) {// IE11
          return true;
        }
        if (navigator.userAgent.indexOf("Edge") > -1) {// Edge
          return true;
        }
      }
      return false;
    }
  }
}
</script>

<style scoped>
.text-scroll-bar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.text-scroll-bar::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
}

.text-scroll-none {
  -ms-overflow-style: none;
}

.text-scroll-none::-webkit-scrollbar {
  display: none;
}

.text-marquee {
  animation-name: around;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes around {
  from {
    margin-left: 100%;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
</style>